<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="../include/tag.jsp"%>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>${label.id == null ? '发布' : '编辑'}分析状态</title>
    <%@include file="../include/commonFile.jsp"%>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/ui/activity/publish_form.css">
    <link rel="stylesheet" href="${ctxStatic}/spectrum/spectrum.css">
    <style>
        .layui-form-label{
            width: 120px!important
        }
        .styles-body li {
            position: relative;
            display: inline-block;
            background-color: #fff;
            width: 30px;
            height: 30px;
            margin: 2px
        }

        .styles-body .c-active:after {
            content: '';
            width: 16px;
            height: 16px;
            background-color: #fff;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            line-height: 10px;
            position: absolute;
            z-index: 2;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%)
        }

        .styles-body .transparent {
            background-image: url();
        }
    </style>
</head><body>
<!--头部-->
<%@include file="../include/header.jsp"%>
<div class="index-outside">
    <%@include file="../include/sidebar.jsp"%>
    <!--内容-->
    <section>
        <div class="section-main">
            <!-- 正文请写在这里 -->
            <form id="myForm" class="layui-form mt20" method="post" action="${ctx}/label/label/save.do">
                <input type="hidden" name="id" value="${label.id}" />
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">状态名称<span class="f-verify-red">*</span></label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" lay-verify="name" autocomplete="off" class="layui-input"
                                   value="${label.name}"
                            >
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">颜色<span class="f-verify-red">*</span></label>
                    <div class="layui-input-block">
                        <%--<input name="style" value="blue" lay-verify="style" id="style" type="hidden">--%>
                        <input id="get_color" name="style" value="${label.style}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <a href="javascript:void(0)" class="layui-btn layui-btn-danger" lay-submit lay-filter="*">立即提交</a>
                        <a href="${ctx}/label/label/list.do" class="layui-btn layui-btn-primary">取消</a>
                    </div>
                </div>
            </form>
        </div><!--底部-->
        <%@include file="../include/footer.jsp"%>
    </section>
</div>

<script src="${ctxStatic}/spectrum/spectrum.js"></script>
<script>
    $(function () {
        layui.use([ 'form', 'laydate' ], function() {
            var form = layui.form;

            //自定义验证规则
            form.verify({
                name : function(value) {
                    if (value == "") {
                        return '请填写分析状态名称';
                    }
                }
            });

            //监听提交
            form.on('submit', function (data) {
                txz.submitObject(data.elem, function (callBack) {
                    $.post('${ctx}/label/label/save.do', $('#myForm').serialize(), function (res) {
                        typeof callBack === 'function' && callBack();
                        if (res.success) {
                            util.layerMsgSuccess("提交成功", function () {
                                location.href = "${ctx}/label/label/list.do";
                            });
                        } else {
                            util.layerMsgError(res.description)
                        }
                    });
                });
                return false;
            });

            $('.styles-body li').click(function (e) {
                if(!$(this).hasClass('c-active')){
                    $('.styles-body .c-active').removeClass('c-active');
                    style = this.className;
                    $("#style").val(style.trim());
                    $(this).addClass('c-active');
                }
            })
        });
        function changeColor (color) {
            var val = 'rgba(' + parseInt(color._r) + ',' + parseInt(color._g) + ',' + parseInt(color._b) + ',' + parseFloat(color._a) + ')';
            that.$set(that.styleData, that.attr, val);
        }

        $('#get_color').spectrum({
            color: '${label.style}'||'#000000',
            showPalette: true,
            showSelectionPalette: true,
            allowEmpty: true,
            showInitial: true,
            showInput: true,
            showAlpha: true,
            chooseText: '确定',
            cancelText: '取消',
            palette: [
                ['#000', '#444', '#666', '#999', '#ccc', '#eee', '#f3f3f3', '#fff'],
                ['#f00', '#f90', '#ff0', '#0f0', '#0ff', '#00f', '#90f', '#f0f'],
                ['#f4cccc', '#fce5cd', '#fff2cc', '#d9ead3', '#d0e0e3', '#cfe2f3', '#d9d2e9', '#ead1dc'],
                ['#ea9999', '#f9cb9c', '#ffe599', '#b6d7a8', '#a2c4c9', '#9fc5e8', '#b4a7d6', '#d5a6bd'],
                ['#e06666', '#f6b26b', '#ffd966', '#93c47d', '#76a5af', '#6fa8dc', '#8e7cc3', '#c27ba0'],
                ['#c00', '#e69138', '#f1c232', '#6aa84f', '#45818e', '#3d85c6', '#674ea7', '#a64d79'],
                ['#900', '#b45f06', '#bf9000', '#38761d', '#134f5c', '#0b5394', '#351c75', '#741b47'],
                ['#600', '#783f04', '#7f6000', '#274e13', '#0c343d', '#073763', '#20124d', '#4c1130']
            ],
            hide: function (color) {
                $('#get_color').val(color);
            }
        });
    })



</script>
<script type="text/javascript">
    txz.initHeader({
        nav:[{
            name: '众筹管理',
            href: '${ctx}/label/label/list.do'
        },{
            name: '${label.id == null ? '发布' : '编辑'}分析状态',
            curr: true
        }],
        btns:[{
            name: '返回',
            href: '${ctx}/label/label/list.do',
            icon: 'back'
        }]
    });
</script>
</body>
</html>